<template>
  <div class="chart-wrapper">
    <v-chart :option="chartOptions" autoresize />
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import VChart from 'vue-echarts';
import 'echarts-wordcloud';

// 定义props
const props = defineProps({
  chartId: {
    type: String,
    required: true
  },
  options: {
    type: Object,
    default: () => ({})
  }
});

// 默认的词云数据
const defaultWords = [
  { name: '技术', value: 128 },
  { name: '数据', value: 110 },
  { name: '分析', value: 95 },
  { name: '智能', value: 85 },
  { name: '开发', value: 78 },
  { name: '云计算', value: 72 },
  { name: '创新', value: 68 },
  { name: '平台', value: 65 },
  { name: '服务', value: 60 },
  { name: '系统', value: 58 },
  { name: '研究', value: 55 },
  { name: '大数据', value: 50 },
  { name: '管理', value: 48 },
  { name: '产品', value: 46 },
  { name: '业务', value: 42 },
  { name: '企业', value: 40 },
  { name: '解决方案', value: 38 },
  { name: '科技', value: 36 },
  { name: '项目', value: 34 },
  { name: '应用', value: 32 },
  { name: '算法', value: 30 },
  { name: 'AI', value: 28 },
  { name: '学习', value: 26 },
  { name: '设计', value: 24 },
  { name: '架构', value: 22 }
];

// 图表配置
const chartOptions = ref({
  title: {
    text: '词云',
    left: 'center'
  },
  tooltip: {
    show: true
  },
  series: [{
    type: 'wordCloud',
    shape: 'circle',
    left: 'center',
    top: 'center',
    width: '80%',
    height: '80%',
    right: null,
    bottom: null,
    sizeRange: [12, 60],
    rotationRange: [-90, 90],
    rotationStep: 45,
    gridSize: 8,
    drawOutOfBound: false,
    textStyle: {
      fontFamily: 'sans-serif',
      fontWeight: 'bold',
      color: function () {
        return 'rgb(' + 
          Math.round(Math.random() * 155 + 100) + ',' + 
          Math.round(Math.random() * 155 + 100) + ',' + 
          Math.round(Math.random() * 155 + 100) + ')';
      }
    },
    emphasis: {
      focus: 'self',
      textStyle: {
        shadowBlur: 10,
        shadowColor: '#333'
      }
    },
    data: defaultWords
  }]
});

// 将传入的options合并到默认配置
watch(() => props.options, (newOptions) => {
  if (newOptions) {
    Object.assign(chartOptions.value, newOptions);
  }
}, { immediate: true });
</script>

<style scoped>
.chart-wrapper {
  width: 100%;
  height: 100%;
}
</style> 